<template>
    <div class="user_right fl ml20">
      <div class="plr30 pt30">
        <div class="uc_tab"><a href="javascript:;" class="crently">收货地址<i></i></a></div>
      </div>
      <div class="user-address clearfix mt30">
        <ul class="clearfix">
          <li v-for="(item,index) of addressList" :key="item.id">
            <div class="addbox">
              <h1>
                {{item.contact_name}}
                <div v-if="item.isdefault" class="default" dataid="39468">
                  <a href="javascript:;" class="cff0000">默认地址</a>
                </div>
                <div v-else class="hidden set">
                  <a href="" class="cff0000">设为默认地址</a>
                </div>
              </h1>
            <h2>
              {{item.province}} {{item.city}} {{item.district}} <br>
              {{item.address}}
            </h2>
            <h3>
              {{item.contact_phone}}
              <div dataid="39468" class="edit">
                <a class="edit_sbt cff0000" href="javascript:;" @click="showEditBox(index)">修改</a>
                <a class="del_sbt c999" href="javascript:;" @click="showConfim(item.id)">删除</a>
              </div>
            </h3>
            </div>
          </li>
          <li class="user-add"><a href="javascript:;" @click="showAddAddress = true"><em><i></i></em>新增收货地址</a></li>
        </ul>
      </div>
<!--      新增收货地址-->
      <el-dialog
        title="新增收货地址"
        :visible.sync="showAddAddress"
        width="50%">
        <div class="">
          <el-form :model="newAddressInfor" :rules="rules" ref="newAddressInfor" label-width="120px" class="demo-ruleForm">
            <el-form-item label="收货人：" prop="contact_name">
              <el-input v-model="newAddressInfor.contact_name" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="所在地区：" prop="province">
              <el-select v-model="newAddressInfor.province" @change="changProvince" style="margin-right: 10px" placeholder="请选择省份">
                <el-option
                  v-for="area in provinceData"
                  :key="area.id"
                  :label="area.name"
                  :value="area.name">
                </el-option>
              </el-select>
              <el-select v-model="newAddressInfor.city" @change="changeCity" style="margin-right: 10px" placeholder="请选择城市">
                <el-option
                  v-for="city in cityData"
                  :key="city.id"
                  :label="city.name"
                  :value="city.name">
                </el-option>
              </el-select>
              <el-select v-model="newAddressInfor.district" style="margin-right: 10px" placeholder="请选择区/县">
                <el-option
                  v-for="district in districtData"
                  :key="district.id"
                  :label="district.name"
                  :value="district.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址：" prop="address">
              <el-input v-model="newAddressInfor.address" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="手机号码：" prop="contact_phone">
              <el-input v-model="newAddressInfor.contact_phone" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="固定电话：">
              <el-input v-model="newAddressInfor.number" style="width: 250px"></el-input>
            </el-form-item>
            <el-form-item label="邮政编码：">
              <el-input v-model="newAddressInfor.postId" style="width: 250px"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showAddAddress == false">取 消</el-button>
          <el-button type="success" @click="testAdd">确 定</el-button>
        </span>
      </el-dialog>
<!--      编辑收货地址-->
      <el-dialog
        title="编辑收货地址"
        :visible.sync="showEditAddress"
        width="50%">
        <div class="">
          <el-form :model="editAddressInfor" :rules="rules" ref="editAddressInfor" label-width="120px" class="demo-ruleForm">
            <el-form-item label="收货人：" prop="contact_name">
              <el-input v-model="editAddressInfor.contact_name"></el-input>
            </el-form-item>
            <el-form-item label="所在地区：" prop="province">
              <el-select v-model="editAddressInfor.province" @change="changProvince" style="margin-right: 10px" placeholder="请选择省份">
                <el-option
                  v-for="area in provinceData"
                  :key="area.id"
                  :label="area.name"
                  :value="area.name">
                </el-option>
              </el-select>
              <el-select v-model="editAddressInfor.city" @change="changeCity" style="margin-right: 10px" placeholder="请选择城市">
                <el-option
                  v-for="city in cityData"
                  :key="city.id"
                  :label="city.name"
                  :value="city.name">
                </el-option>
              </el-select>
              <el-select v-model="editAddressInfor.district" style="margin-right: 10px" placeholder="请选择区/县">
                <el-option
                  v-for="district in districtData"
                  :key="district.id"
                  :label="district.name"
                  :value="district.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址：" prop="address">
              <el-input v-model="editAddressInfor.address"></el-input>
            </el-form-item>
            <el-form-item label="手机号码：" prop="contact_phone">
              <el-input v-model="editAddressInfor.contact_phone"></el-input>
            </el-form-item>
<!--            <el-form-item label="固定电话：">-->
<!--              <el-input v-model="editAddressInfor.number"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="邮政编码：">-->
<!--              <el-input v-model="editAddressInfor.postId"></el-input>-->
<!--            </el-form-item>-->
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showEditAddress == false">取 消</el-button>
          <el-button type="success" @click="testEdit">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="confimDel"
        width="30%"
        >
        <span>您确定要删除该收货地址吗？</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="confimDel = false">取 消</el-button>
    <el-button type="success" @click="deleteAddress">确 定</el-button>
  </span>
      </el-dialog>
    </div>
</template>

<script>
import { getAddress, addAddress, updateAddress, getProvinceList, delAddress } from '@/api/user'
export default {
  name: 'rt-address',
  metaInfo: {
    title: '收货地址',
    titleTemplate: '工流界MRO一站式采购商城'
  },
  data () {
    return {
      token: 'Bearer ' + this.$store.getters.token,
      showAddAddress: false, // 显示新增收货地址弹框
      showEditAddress: false, // 显示编辑收货地址
      confimDel: false, // 确认删除
      rules: {
        contact_name: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        province: [
          {
            required: true, message: '省市区必填项', trigger: ['blur', 'change']
          }
        ],
        address: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        contact_phone: [
          {
            required: true, message: '必填项', trigger: 'blur'
          }
        ]
      },
      delId: 0, // 待删除地址的id
      index: 0,
      areaList: [], // 所有省市区的数据
      provinceData: [], // 省
      cityData: [], // 市
      districtData: [], // 区、县
      addressList: [],
      newAddressInfor: {
        contact_name: '',
        province: '',
        city: '',
        district: '',
        address: '',
        contact_phone: '',
        number: '',
        postId: ''
      },
      editAddressInfor: {
        contact_name: '',
        province: '',
        city: '',
        district: '',
        address: '',
        contact_phone: '',
        number: '',
        postId: ''
      },
      type: ''
    }
  },
  mounted () {
    this.getAddressList()
    this.getareaList()
  },
  created () {
    this.type = this.$route.query.type
  },
  methods: {
    async getAddressList () { // 获取已存在的地址列表
      const res = await getAddress()
      if (res.length > 0) {
        this.addressList = res
      }
    },
    async getareaList () { // 获取省市区
      const res = await getProvinceList()
      this.areaList = res
      this.getAllProvinceList()
    },
    getAllProvinceList () { // 获取省列表
      for (var p of this.areaList) {
        var province = {}
        province.id = p.id
        province.name = p.name
        this.provinceData.push(province)
      }
    },
    changProvince () { // 当省发生改变时
      for (var p in this.areaList) {
        if (this.showAddAddress && this.areaList[p].name === this.newAddressInfor.province) {
          this.cityData = this.areaList[p].children
          this.newAddressInfor.city = this.cityData[0].name
          this.changeCity()
        }
        if (this.showEditAddress && this.areaList[p].name === this.editAddressInfor.province) {
          this.cityData = this.areaList[p].children
          this.editAddressInfor.city = this.cityData[0].name
          this.changeCity()
        }
      }
    },
    changeCity () { // 当市发生改变时
      for (var c in this.cityData) {
        if (this.showAddAddress && this.cityData[c].name === this.newAddressInfor.city) {
          this.districtData = this.cityData[c].children
          this.newAddressInfor.district = this.districtData[0].name
        }
        if (this.showEditAddress && this.cityData[c].name === this.editAddressInfor.city) {
          this.districtData = this.cityData[c].children
          this.editAddressInfor.district = this.districtData[0].name
        }
      }
    },
    // 校验新增地址
    testAdd () {
      this.$refs.newAddressInfor.validate((valid) => {
        if (valid) {
          this.addAddressEvent()
          if (this.type == 'addgm') {
            this.$router.go(-1)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 校验编辑地址
    testEdit () {
      this.$refs.editAddressInfor.validate((valid) => {
        if (valid) {
          this.editAddressEvent()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async addAddressEvent () { // 提交新地址
      const res = await addAddress(this.newAddressInfor)
      if (res.created_at) {
        this.getAddressList()
        this.showAddAddress = false
      }
    },
    async editAddressEvent () { // 提交编辑后的地址
      const res = await updateAddress(this.editAddressInfor)
      if (res.created_at) {
        this.getAddressList()
        this.showEditAddress = false
      }
    },
    showConfim (id) {
      this.confimDel = true
      this.delId = id
    },
    showEditBox (index) { // 修改地址
      this.showEditAddress = true
      for (var k in this.addressList[index]) {
        this.editAddressInfor[k] = this.addressList[index][k]
      }
    },
    async deleteAddress () { // 删除地址
      const res = await delAddress({
        id: this.delId
      })
      if (res.length === 0) {
        this.getAddressList()
        this.confimDel = false
      }
    }
    // addsuccer(){
    //   this.showAddAddress = false
    //   console.log('ppppppppppppppppppppppppp')

    // }
  }
}
</script>

<style lang="scss" scoped>
    .user_right {
      width: 950px;
      background: #fff;
      text-align: left;
      &.fl {
        float: left;
        display: inline;
      }
      .plr30 {
        padding-left: 30px;
        padding-right: 30px;
      }
      .pt30 {
        padding-top: 30px;
      }
      .mt30 {
        margin-top: 30px;
      }
      .clearfix {
        zoom: 1;
      }
      .uc_tab {
        height: 40px;
        border-bottom: 2px solid #e6e6e6;
        a{
          height: 40px;
          position: relative;
          display: inline-block;
          margin-right: 30px;
          font-size: 18px;
          &.crently {
            color: #4448f8;
            i {
              position: absolute;
              bottom: -2px;
              left: 0;
              width: 100%;
              background: #4448f8;
              height: 2px;
              overflow: hidden;
            }
          }
        }
      }
      .hidden {
        display: none;
      }
      a {
        text-decoration: none;
      }
      .user-address ul {
        padding-left: 18px;
        li{
          float: left;
          width: 280px;
          height: 164px;
          overflow: hidden;
          position: relative;
          margin: 0 12px 24px;
          .addbox{
            width: 280px;
            height: 164px;
            cursor: default;
            background: url(../../../assets/img/address_bg2.jpg) no-repeat 0 0;
            color: #666;
            font-size: 12px;
            &:hover{
              background: url(../../../assets/img/address_bg2.jpg) no-repeat -280px 0;
              .edit,.set{
                display: block;
              }
            }
            .default,.set {
              position: absolute;
              right: 0;
              bottom: 12px;
            }
            h1{
              border-bottom: 1px solid #e6e6e6;
              width: 250px;
              margin: 0 auto;
              padding-bottom: 12px;
              padding-top: 20px;
              position: relative;
              font-size: 12px;
              color: #666;
            }
            h2{
              border-bottom: 1px solid #e6e6e6;
              width: 250px;
              margin: 0 auto;
              padding-bottom: 8px;
              padding-top: 10px;
              height: 48px;
              line-height: 24px;
              font-size: 12px;
            }
            h3{
              width: 250px;
              margin: 0 auto;
              padding-top: 12px;
              position: relative;
              font-size: 12px;
            }
            .cff0000, a.cff0000, a.cff0000:hover {
              color: #ff0000;
            }
            a.c999, .c999 {
              color: #999;
            }
            .edit{
              display: none;
              position: absolute;
              right: 0;
              top: 12px;
              a{
                margin-left: 10px;
              }
            }
          }
          &.user-add a {
            display: block;
            background: url(../../../assets/img/address_bg2.jpg) no-repeat;
            background-position: 0 0;
            width: 280px;
            height: 104px;
            font-size: 16px;
            color: #666;
            text-align: center;
            padding-top: 60px;
            -webkit-transition: all 0s;
            -moz-transition: all 0s;
            transition: all 0s;
            &:hover {
              background-position: -280px 0;
            }
            em{
              display: block;
              width: 4px;
              height: 26px;
              margin: 0 auto 8px;
              position: relative;
              background: #bbb;
              i{
                width: 26px;
                height: 4px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -2px 0 0 -13px;
                background: #bbb;
              }
            }
          }
        }
      }
    }
</style>
